<template>
  <div class="tag-block">
    <el-tag
      v-for="tag in valueList"
      :key="tag.id"
      closable
      effect="plain"
      size="mini"
      style="margin-right:3px;margin-bottom:3px"
      @close="() => { handleClose(tag) }"
    >
      {{ tag.name }}
    </el-tag>
  </div>
</template>

<script>
export default {
  name: 'TagView',
  props: {
    optionList: {
      type: Array,
      default: () => []
    },

    value: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    valueList: function() {
      const { value, optionList } = this.$props
      if (!value || value.length === 0 || !optionList || optionList.length === 0) {
        return []
      }

      return value.map(e => {
        const current = optionList.find(ee => {
          return (ee.id === e || ee.id === e.notifyTargetId || ee.id === e.id)
        })

        return current || {}
      })
    }
  },
  methods: {
    handleClose(e) {
      this.$emit('close', e)
    }
  }
}
</script>

<style>

</style>
